<template>
  <eh />
  <div class="contact-view">
    <!-- Form Progress -->
    <div class="contact-view__progress">
      <div class="contact-view__progress-header">
        <span class="contact-view__progress-label">完成进度</span>
        <span class="contact-view__progress-percent">{{ formProgress }}%</span>
      </div>
      <div class="contact-view__progress-bar">
        <div class="contact-view__progress-fill" :style="{ width: `${formProgress}%` }"></div>
      </div>
    </div>

    <div class="contact-view__card">
      <!-- Header with decorative elements -->
      <div class="contact-view__header">
        <div class="contact-view__header-decoration"></div>
        <h2 class="contact-view__title">发布新帖子</h2>
        <p class="contact-view__subtitle">分享您的宠物故事</p>
      </div>

      <div class="contact-view__content">
        <form @submit.prevent="onSubmit" class="contact-view__form">
          <!-- 帖子类型 -->
          <div class="contact-view__form-group">
            <label class="contact-view__label">选择帖子类型</label>
            <div class="contact-view__options-grid">
              <label v-for="type in postTypes" :key="type.value" class="contact-view__option"
                :class="{ 'contact-view__option--selected': postType === type.value }">
                <input type="radio" :id="type.value" :value="type.value" v-model="postType" required
                  class="contact-view__radio" />
                <div class="contact-view__option-content">
                  <component :is="type.icon" class="contact-view__option-icon"
                    :class="{ 'contact-view__option-icon--selected': postType === type.value }" />
                  <span class="contact-view__option-label"
                    :class="{ 'contact-view__option-label--selected': postType === type.value }">
                    {{ type.label }}
                  </span>
                </div>
              </label>
            </div>
          </div>

          <!-- 种类 -->
          <div v-if="postType !== 'knowledge'" class="contact-view__form-group">
            <label class="contact-view__label">选择宠物种类</label>
            <div class="contact-view__options-grid">
              <label v-for="type in speciesTypes" :key="type.value" class="contact-view__option"
                :class="{ 'contact-view__option--selected': species === type.value }">
                <input type="radio" :id="type.value" :value="type.value" v-model="species" required
                  class="contact-view__radio" />
                <div class="contact-view__option-content">
                  <component :is="type.icon" class="contact-view__option-icon"
                    :class="{ 'contact-view__option-icon--selected': species === type.value }" />
                  <span class="contact-view__option-label"
                    :class="{ 'contact-view__option-label--selected': species === type.value }">
                    {{ type.label }}
                  </span>
                </div>
              </label>
            </div>
          </div>

          <!-- 标题 -->
          <div class="contact-view__form-group">
            <label for="title" class="contact-view__label">
              标题
              <span class="contact-view__label-hint">(最多15字)</span>
            </label>
            <div class="contact-view__input-wrapper">
              <input v-model="title" id="title" type="text" required maxlength="15" class="contact-view__input"
                placeholder="请输入标题..." />
              <span class="contact-view__input-counter">
                {{ title.length }}/15
              </span>
            </div>
          </div>

          <!-- 具体详情 -->
          <div class="contact-view__form-group">
            <label for="content" class="contact-view__label">具体详情</label>
            <textarea v-model="content" id="content" required rows="6" class="contact-view__textarea"
              placeholder="请详细描述..."></textarea>
          </div>

          <!-- 图片上传 -->
          <div v-if="postType !== 'knowledge'" class="contact-view__form-group">
            <label class="contact-view__label">上传图片</label>
            <div class="contact-view__upload-area" @dragover.prevent @drop.prevent="handleDrop"
              :class="{ 'contact-view__upload-area--dragging': isDragging }">
              <div class="contact-view__upload-content">
                <svg class="contact-view__upload-icon" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                  <path
                    d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                <div class="contact-view__upload-text">
                  <label for="image" class="contact-view__upload-label">
                    <span>点击上传图片</span>
                    <input id="image" type="file" class="contact-view__file-input" @change="onFileChange"
                      accept="image/*">
                  </label>
                  <p class="contact-view__upload-hint">或拖拽图片到此处</p>
                </div>
                <p class="contact-view__upload-format">PNG, JPG, GIF 格式</p>
              </div>
            </div>

            <!-- 图片预览 -->
            <transition name="contact-view__fade">
              <div v-if="imagePreview" class="contact-view__preview">
                <img :src="imagePreview" alt="Preview" class="contact-view__preview-image">
                <div class="contact-view__preview-overlay">
                  <button type="button" @click="removeImage" class="contact-view__preview-button">
                    删除图片
                  </button>
                </div>
              </div>
            </transition>
          </div>

          <!-- 提交按钮 -->
          <div class="contact-view__submit">
            <button type="submit" class="contact-view__button" :disabled="isSubmitting">
              <span v-if="isSubmitting" class="contact-view__button-loading">
                <svg class="contact-view__spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle class="contact-view__spinner-circle" cx="12" cy="12" r="10" stroke="currentColor"
                    stroke-width="4"></circle>
                  <path class="contact-view__spinner-path" fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                  </path>
                </svg>
                发布中...
              </span>
              <span v-else>发布帖子</span>
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- 成功消息 -->
    <transition name="contact-view__slide">
      <div v-if="amessage" class="contact-view__message">
        <svg class="contact-view__message-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
        {{ amessage }}
      </div>
    </transition>
  </div>
  <fonnter />
</template>

<script>
import { Search, Heart, BookOpen, Cat, Dog, HelpCircle } from 'lucide-vue-next'
import fonnter from '../../components/fonnter.vue'
import eh from '../../components/esyhead.vue'
import axios from 'axios';
import Cookies from 'js-cookie';
export default {
  components: {
    fonnter,
    eh,
    Search,
    Heart,
    BookOpen,
    Cat,
    Dog,
    HelpCircle
  },
  data() {
    return {
      blogType: 1, // 默认为"寻找"
      dwType: 1, // 默认为空
      postType: 'finding',
      species: '',
      image: null,
      imagePreview: null,
      title: '',
      content: '',
      amessage: '',
      isSubmitting: false,
      isDragging: false,
      postTypes: [
        { value: 1, label: '寻找', icon: 'Search' },
        { value: 2, label: '领养', icon: 'Heart' },
        { value: 3, label: '知识', icon: 'BookOpen' }
      ],
      speciesTypes: [
        { value: 1, label: '狗', icon: 'Cat' },
        { value: 2, label: '猫', icon: 'Dog' },
        { value: 3, label: '其他', icon: 'HelpCircle' }
      ]
    }
  },
  computed: {
    formProgress() {
      let progress = 0
      const total = this.postType === 'knowledge' ? 2 : 4 // 知识类型不需要species和图片

      if (this.postType) progress++
      if (this.postType !== 'knowledge' && this.species) progress++
      if (this.title.trim()) progress++
      if (this.postType !== 'knowledge' && this.image) progress++

      return Math.round((progress / total) * 100)
    }
  },
  methods: {
    async onSubmit() {
      this.isSubmitting = true
      const formData = new FormData()
      formData.append('blogType', this.postType)
      formData.append('dwType', this.species)
      formData.append('title', this.title)
      formData.append('content', this.content)  // 将 details 改为 content
      if (this.image) {
        formData.append('picture', this.image)
      }
      for (let pair of formData.entries()) {
      }
      try {
        const token = Cookies.get('token')
        const response = await axios.post('http://localhost:8080/Petrescue/blog/addBlog', formData, {
          withCredentials: true, 
          headers: {
            'Authorization': `Bearer ${token}`, 
            'Content-Type': 'multipart/form-data'
          }
        })

        const { code, message } = response.data;
        this.amessage = message
        if (code == 200) {
          this.resetForm()
          setTimeout(() => {
            this.amessage = ''
          }, 3000)
        }
      } catch (error) {
        console.error('Error:', error)
        this.amessage = '帖子发布失败，请稍后再试。'
      } finally {
        this.isSubmitting = false
      }
    },
    onFileChange(event) {
      const file = event.target.files[0]
      if (file) {
        this.handleFile(file)
      }
    },
    handleDrop(event) {
      this.isDragging = false
      const file = event.dataTransfer.files[0]
      if (file && file.type.startsWith('image/')) {
        this.handleFile(file)
      }
    },
    handleFile(file) {
      this.image = file
      this.imagePreview = URL.createObjectURL(file)
    },
    removeImage() {
      if (this.imagePreview) {
        URL.revokeObjectURL(this.imagePreview)
      }
      this.image = null
      this.imagePreview = null
      // 重置文件输入
      const fileInput = document.getElementById('image')
      if (fileInput) fileInput.value = ''
    },
    resetForm() {
      this.postType = 'finding'
      this.species = ''
      this.image = null
      this.title = ''
      this.content = ''
      this.removeImage()
    }
  },
  beforeUnmount() {
    if (this.imagePreview) {
      URL.revokeObjectURL(this.imagePreview)
    }
  }
}
</script>

<style lang="less" scoped>
// 变量定义
@primary-color: #7c2d12;
@primary-gradient: linear-gradient(90deg, #ea580c 0%, #c2410c 100%);
@primary-hover: linear-gradient(90deg, #c2410c 0%, #9a3412 100%);
@background-gradient: linear-gradient(135deg, #fff9f0 0%, #fef3c7 100%);
@border-color: #f59e0b;
@border-hover: #ea580c;
@text-color: #7c2d12;
@text-light: #9a3412;
@white: #ffffff;
@shadow: 0 2px 10px rgba(124, 45, 18, 0.1);

.contact-view {
  min-height: 100vh;
  background: @background-gradient;
  padding: 20px 0;

  &__progress {
    margin-bottom: 24px;
    padding: 0 16px;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;

    &-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    &-label,
    &-percent {
      font-size: 14px;
      font-weight: 500;
      color: @primary-color;
    }

    &-bar {
      width: 100%;
      height: 8px;
      background-color: #e5e7eb;
      border-radius: 4px;
      overflow: hidden;
    }

    &-fill {
      height: 100%;
      background: @primary-gradient;
      transition: width 0.5s ease-out;
      border-radius: 4px;
    }
  }

  &__card {
    background-color: @white;
    border-radius: 12px;
    box-shadow: @shadow;
    overflow: hidden;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
  }

  &__header {
    position: relative;
    background: @primary-gradient;
    padding: 32px;
    color: @white;
    overflow: hidden;

    &-decoration {
      position: absolute;
      top: 0;
      right: 0;
      width: 160px;
      height: 160px;
      transform: translateX(80px) translateY(-80px);

      &::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: @white;
        opacity: 0.1;
      }
    }
  }

  &__title {
    font-size: 28px;
    font-weight: bold;
    position: relative;
    z-index: 10;
    margin-bottom: 8px;
  }

  &__subtitle {
    opacity: 0.8;
    position: relative;
    z-index: 10;
  }

  &__content {
    padding: 32px;
  }

  &__form {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  &__form-group {
    transition: all 0.3s;

    &:hover {
      transform: scale(1.01);
    }

    &:focus-within {
      transform: scale(1.01);
    }
  }

  &__label {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: @text-color;
    margin-bottom: 12px;

    &-hint {
      font-size: 14px;
      font-weight: normal;
      color: #6b7280;
      margin-left: 8px;
    }
  }

  &__options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  &__option {
    position: relative;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      border-color: fade(@border-hover, 50%);
    }

    &--selected {
      border-color: @primary-color;
      background-color: fade(@primary-color, 5%);
    }
  }

  &__radio {
    position: absolute;
    opacity: 0;
  }

  &__option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &__option-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 8px;
    color: #9ca3af;

    &--selected {
      color: @primary-color;
    }
  }

  &__option-label {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;

    &--selected {
      color: @primary-color;
    }
  }

  &__input-wrapper {
    position: relative;
  }

  &__input {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background-color: #fef3c7;
    color: @text-color;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;

    &:focus {
      outline: none;
      border-color: @primary-color;
      box-shadow: 0 0 0 2px fade(@primary-color, 20%);
    }

    &::placeholder {
      color: #d97706;
      opacity: 0.7;
    }
  }

  &__input-counter {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #9ca3af;
  }

  &__textarea {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background-color: #fef3c7;
    color: @text-color;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    resize: vertical;

    &:focus {
      outline: none;
      border-color: @primary-color;
      box-shadow: 0 0 0 2px fade(@primary-color, 20%);
    }

    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-track {
      background-color: #f3f4f6;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: @primary-color;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: #c2410c;
    }
  }

  &__upload-area {
    position: relative;
    cursor: pointer;
    margin-top: 4px;

    &--dragging {
      border-color: @primary-color;
      background-color: fade(@primary-color, 5%);
    }
  }

  &__upload-content {
    display: flex;
    justify-content: center;
    padding: 20px 24px;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s;

    .contact-view__upload-area--dragging & {
      border-color: @primary-color;
      background-color: fade(@primary-color, 5%);
    }
  }

  &__upload-icon {
    margin: 0 auto;
    height: 48px;
    width: 48px;
    color: #9ca3af;
    transition: color 0.3s;

    .contact-view__upload-area:hover & {
      color: @primary-color;
    }
  }

  &__upload-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
    font-size: 14px;
    color: #4b5563;
  }

  &__upload-label {
    cursor: pointer;
    color: @primary-color;
    font-weight: 500;
    transition: color 0.2s;

    &:hover {
      color: #c2410c;
    }
  }

  &__upload-hint {
    margin-left: 4px;
  }

  &__upload-format {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    width: 100%;
  }

  &__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  &__preview {
    position: relative;
    margin-top: 16px;

    &:hover {
      .contact-view__preview-overlay {
        opacity: 1;
      }
    }
  }

  &__preview-image {
    width: 100%;
    height: 192px;
    object-fit: cover;
    border-radius: 8px;
  }

  &__preview-overlay {
    position: absolute;
    inset: 0;
    background-color: fade(#000, 50%);
    opacity: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
  }

  &__preview-button {
    color: @white;
    background-color: #ef4444;
    padding: 8px 16px;
    border-radius: 9999px;
    transition: background-color 0.2s;

    &:hover {
      background-color: #dc2626;
    }
  }

  &__submit {
    display: flex;
    justify-content: center;
    padding-top: 16px;
  }

  &__button {
    position: relative;
    overflow: hidden;
    background: @primary-gradient;
    color: @white;
    padding: 16px 48px;
    border: none;
    border-radius: 9999px;
    transition: all 0.3s;
    transform: scale(1);
    cursor: pointer;
    font-weight: 500;

    &:hover:not(:disabled) {
      background: @primary-hover;
      transform: scale(1.05);
    }

    &:focus {
      outline: none;
      box-shadow: 0 0 0 2px fade(@primary-color, 50%);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  &__button-loading {
    display: flex;
    align-items: center;
  }

  &__spinner {
    animation: contact-view__spin 1s linear infinite;
    height: 20px;
    width: 20px;
    margin-right: 12px;
  }

  &__spinner-circle {
    opacity: 0.25;
  }

  &__spinner-path {
    opacity: 0.75;
  }

  &__message {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background-color: #10b981;
    color: @white;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: @shadow;
    display: flex;
    align-items: center;
  }

  &__message-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }

  // 动画
  &__fade {

    &-enter-active,
    &-leave-active {
      transition: all 0.3s;
    }

    &-enter-from,
    &-leave-to {
      opacity: 0;
      transform: translateY(16px);
    }
  }

  &__slide {
    &-enter-active {
      transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    }

    &-leave-active {
      transition: transform 0.5s ease-in, opacity 0.5s ease-in;
    }

    &-enter-from {
      transform: translateY(40px);
      opacity: 0;
    }

    &-enter-to {
      transform: translateY(0);
      opacity: 1;
    }

    &-leave-from {
      transform: translateY(0);
      opacity: 1;
    }

    &-leave-to {
      transform: translateY(40px);
      opacity: 0;
    }
  }
}

@keyframes contact-view__spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>